<template>
  <el-row class="home" :gutter="20">
    <el-col :span="10">
      <el-card shadow="hover">
        <div class="user">
          <img :src="'http://localhost:8666/acl/common/download?name=' + imgname">
          <div class="userinfo">
            <p class="name">姓名:{{ username }}</p>
            <p class="access">角色:{{ username === 'admin' ? '超级管理员' : '普通员工' }}</p>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top:20px; height:350px">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="14">

      <el-card v-for="item in cpountData" :key="item.name"
               style="float: left;margin-left: 50px; margin-bottom: 20px; width: 220px;"
               :body-style="{ display: 'flex', padding: 0 }">
        <i class="icon" :class="`el-icon-${item.icon}`" style="font-size: 45px; padding-top: 20px;
                    text-align: center; " :style="{ background: item.color }">
        </i>
        <div class="detail">
          <p class="num">￥{{ item.value }}</p>
          <p class="txt">{{ item.name }}</p>
        </div>
      </el-card>
      <el-card style="height: 250px; width: 760px; margin-left: 50px ">
        <div id="main" style="width: 760px; height: 250px"></div>
      </el-card>
      <div class="graph" style=" width: 760px; margin-left: 50px; margin-top: 20px; float: left;">
        <el-card style="width: 370px; height: 190px; float: left ; margin-right: 20px;">
          <div id="bread" style="width: 370px;height:190px;"></div>
        </el-card>
        <el-card style="width: 370px; height: 190px; float: left"></el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>

import automobile from "@/api/automobile";

export default {
  name: 'HomeName',
  data() {
    return {
      name: [],
      quantity: [],
      bing: [],
      automobileQueryVo: {},
      automobileList: [],
      imgname: '',
      username: '',
      tableData: [{
        name: '蛋糕',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
      }, {
        name: '下午茶',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
      }, {
        name: '月饼',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
      }, {
        name: '巧克力',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
      }, {
        name: '饼干',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
      }, {
        name: '粽子',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 800
      },
      ],
      tableLabel: {
        name: '甜品',
        todayBuy: '今日购买',
        monthBuy: '本月购买',
        totalBuy: '总购买'
      },
      cpountData: [{
        name: "今日支付订单",
        value: 1234,
        icon: "success",
        color: "#2ec7c9"
      }, {
        name: "今日收藏订单",
        value: 210,
        icon: "star-on",
        color: "#ffb980"
      }, {
        name: "今日未支付订单",
        value: 1234,
        icon: "s-goods",
        color: "#4169E1"
      }, {
        name: "本月支付订单",
        value: 1234,
        icon: "success",
        color: "#2ec7c9"
      }, {
        name: "本月收藏订单",
        value: 210,
        icon: "star-on",
        color: "#ffb980"
      }, {
        name: "本月未支付订单",
        value: 1234,
        icon: "s-goods",
        color: "#4169E1"
      }]
    }
  },
  mounted() {
    this.drawChart();
    this.breadChart();
    this.usermation();
  },
  //调用method里面的方法
  created() {
    this.getAutomobile();
    this.zhuData();
    this.bingData();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "甜品销量",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["蛋糕", "下午茶", "月饼", "巧克力", "饼干", "粽子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    breadChart() {
      var myChart = this.$echarts.init(document.getElementById('bread'));

      myChart.setOption({
        series: [
          {
            name: '访问来源',
            type: 'pie',    // 设置图表类型为饼图
            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [          // 数据数组，name 为数据项名称，value 为数据项值
              {value: 235, name: '蛋糕'},
              {value: 274, name: '下午茶'},
              {value: 310, name: '月饼'},
              {value: 335, name: '巧克力'},
              {value: 400, name: '饼干'},
              {value: 300, name: '粽子'}
            ]
          }
        ]
      });
    },
    usermation() {
      console.log(JSON.parse(localStorage.getItem('userInfo')))
      this.imgname = JSON.parse(localStorage.getItem('userInfo')).image
      this.username = JSON.parse(localStorage.getItem('userInfo')).username
    },


    //  汽车列表
    getAutomobile() {
      automobile.getAutomobileListPage(1, 6, this.automobileQueryVo).then(response => {
        console.log("汽车", response)
        this.automobileList = response.data.data.records
      })
    },

    zhuData() {
      automobile.zhuData().then(response => {
        console.log("柱状图", response)
        this.name = response.data.name;
        this.quantity = response.data.quantity
        console.log(this.name);
        console.log(this.quantity);
      })
    },

    bingData() {
      automobile.bingData().then(response => {
        console.log("饼状图",response)
        this.bing = response.data
      })
    }


  }
}
</script>

<style scoped>
img {
  width: 166px;
  height: 166px;
}

.el-row {
  margin-bottom: 20px;
  /* &:last-child {
    margin-bottom: 0;
  } */
}

.el-col {
  border-radius: 4px;
}

.icon {
  width: 100px;
  height: 100px;
}

.detail {
  font-weight: bold;
  padding-top: 20px;
  padding-left: 10px;
}
</style>
